<template>
	<view>
		<view style='width:100%'>
<!-- 			<img :src='src' style='width:100%;height:auto'
				mode='widthFix'></img> -->
				<u-swiper :list="images" keyName="image" height='230'></u-swiper>
		</view>
		<view v-if="list.length === 0" style='margin-top:10vh'>
		<!-- 	<u-empty mode="list" text=''>
			</u-empty>
			<view style='margin:20px 30%'>
				<u-button text='马上认购' type='warning' shape='circle' size='small' @click='toUrl("/pages/cart/cooperation?id=3")'></u-button>
			</view> -->
		</view>
		<view v-else>
			<view class='list'>
				<view v-for='item in list' class='list-item' @click='toUrl(`/pages/cart/tree?id=${item.id}`)'>
					<view class='image'>
						<img :src='item.coupon.__metadata.image ? item.coupon.__metadata.image : cover' style='width:100%;height:auto' mode='widthFix' />
					</view>
					<view class='title' v-if='item.code'>{{item.code}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				cover: '/static/tree.png',
				src: '',
				images: []
			}
		},
		onShow() {
			this.getUserCoupons()
		},
		onLoad(){
			this.request.get(`api/albums/by-title/cart-index`).then((res) => {
				console.log(res.data)
				this.src=res.data.pictures[0].image
				this.images = res.data.pictures
			})
		},
		methods: {
			getUserCoupons(){
				uni.showLoading()
				this.request.get(`api/user-coupons`,{
					'@filter': `entity.getIsUsed() == false && entity.getCoupon().getUseEndTime() > datetime.get('now') && entity.getCoupon().getRegion().getType().getSlug() == 'tree'`,
					'@expands': `['entity.coupon']`
				}).then((res) => {
					console.log(res.data)
					this.list = res.data
					uni.hideLoading()
				})
			},
			toUrl(page){
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style>
	.list {
		display: flex;
		flex-wrap: wrap;
	}

	.list-item {
		width: 20.5%;
		background-color: #fff;
		padding: 8px;
		overflow: hidden;
	}

	.image {
		background-color: antiquewhite;
		padding: 5px;
		border-radius: 5px;
		margin: auto;

	}

	.title {
		text-align: center;
		color: #909399;
		font-size: 14px;
	}
	
	.code{
		font-size: 18px;
		color:#303133;
		font-weight: bold;
		margin: 10px 0px;
		text-align: center;
	}
</style>